<template>
  <div class="ma">
    <div id="myChart"></div>
    <div class="posit">
      <el-button
        type="primary"
        icon="el-icon-arrow-left"
        circle
        @click="getPreWeekDate"
        :disabled="day == 1 ? true : false"
      ></el-button>
      <span>&nbsp;&nbsp; 第&nbsp;{{ day }}&nbsp;周&nbsp;&nbsp;</span>
      <el-button
        type="primary"
        icon="el-icon-arrow-right"
        circle
        @click="getNextWeekDate"
        :disabled="day == 4 ? true : false"
      ></el-button>
    </div>
  </div>
</template>

<script>
import buildApi from "@/api/build";

export default {
  data() {
    return {
      day: 1,
    };
  },
  mounted() {
    this.get();
  },
  components: {},

  methods: {
    formatting() {},
    //  获取上一周
    getPreWeekDate() {
      // if (this.day == 1) {
      //   return false;
      // }
      this.day--;
      this.get();
    },
    //  获取下一周
    getNextWeekDate() {
      // if (this.day == 1) {
      //   return false;
      // }
      this.day++;
      this.get();
    },
    get() {
      const day = parseInt(new Date().getDate() / 7);

      if (day < 0) this.day = 1;
      this.day = day;
      buildApi.getList().then((response) => {
        var count = 0;
        let all = 0;
        const res = response.data;
        if (res.status == 0) {
          switch (this.day) {
            case 1:
              res.data.filter((item) => {
                if (item.first) {
                  count++;
                } else {
                  all++;
                }
              });
              break;
            case 2:
              res.data.filter((item) => {
                if (item.second) {
                  count++;
                } else {
                  all++;
                }
              });
              break;
            case 3:
              res.data.filter((item) => {
                if (item.third) {
                  count++;
                } else {
                  all++;
                }
              });
              break;
            case 4:
              res.data.filter((item) => {
                if (item.fourth) {
                  count++;
                } else {
                  all++;
                }
              });
              break;
          }
          var chartDom = document.getElementById("myChart");
          var myChart = this.$echarts.init(chartDom);
          var option;

          option = {
            type: "bar",
            // 此系列自己的调色盘。

            title: {
              text: "本周核酸情况表",
              left: "center",
            },
            tooltip: {
              trigger: "item",
            },
            legend: {
              orient: "vertical",
              left: "left",
            },
            series: [
              {
                name: "Access From",
                type: "pie",
                radius: "70%",
                color: ["#F08080", "#98FB98"],
                data: [
                  { value: count, name: "未做核酸 " },
                  { value: all, name: "已做核酸" },
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          };

          option && myChart.setOption(option);
        }
      });
    },
  },
};
</script>

<style scoped>
.ma {
  position: relative;
}
.posit {
  width: 200px;
  text-align: center;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%);
}
#myChart {
  width: 100%;
  height: 500px;
  margin: auto;
  margin: top 100px;
}
</style>